<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p1_CSS的三种位置</title>
    <style>
        /* 2.内部样式,对当前页所有被选中的元素生效 */
        p {
            color: green;
        }
        div {
            color: blue;
        }
        h2 {
            color: green !important;
        }
    </style>
    <!-- 3.外部样式
       rel="stylesheet"必写属性 表示引入的是样式表
       href="url"被引入的外部CSS文件路径 -->
    <link rel="stylesheet" href="01.css">
</head>
<body>
    <!-- 1.行内样式 加在当前行 只对当前行元素生效 -->
    <h4 style="color:red;background-color: yellow;">我是标题1</h4>
    <h4>我是标题2</h4>
    <h4>我是标题3</h4>

    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <div>我是块级元素</div>

    <h2 style="color:red;">测试优先级</h2>
<!--- 渲染同一个元素，样式不同会叠加生效,比如背景色和文字颜色会同时生效
-     如果渲染的样式相同，按照如下优先级排序：
-     !important > 行内样式>（内部样式=外部样式）>浏览器自带的样式
-     内部样式与外部样式优先级一样，后写的样式会把之前的样式覆盖掉
-->
</body>
</html>